<template>
	<el-drawer title="日志详情" v-model="visible" :size="700" destroy-on-close @closed="$emit('closed')">
		<el-main>
			<el-descriptions :column="1" border size="small">
				<el-descriptions-item label="模块">{{ data.module }}</el-descriptions-item>
				<el-descriptions-item label="操作名称">{{ data.operationName }}</el-descriptions-item>
				<el-descriptions-item label="请求方法">{{ data.method }}</el-descriptions-item>
				<el-descriptions-item label="请求接口">{{ data.requestUrl }}</el-descriptions-item>
				<el-descriptions-item label="请求方式">{{ data.requestMethod }}</el-descriptions-item>
				<el-descriptions-item label="请求ip">{{ data.requestIp }}</el-descriptions-item>
				<el-descriptions-item label="请求地点">{{ data.requestLocation }}</el-descriptions-item>
				<el-descriptions-item label="请求耗时">{{ data.costTime }}</el-descriptions-item>
				<el-descriptions-item label="操作人">{{ data.operationUser }}</el-descriptions-item>
				<el-descriptions-item label="操作时间">{{ data.operationTime }}</el-descriptions-item>
				<el-descriptions-item label="状态">{{ data.successFlag ? '成功' : '失败' }}</el-descriptions-item>
			</el-descriptions>
			<el-collapse v-model="activeNames" style="margin-top: 20px;">
				<el-collapse-item v-if="data.requestParam" title="请求参数" name="requestParam">
					<el-input type="textarea" autosize v-model="data.requestParam" class="code" disabled></el-input>
				</el-collapse-item>
				<el-collapse-item v-if="data.requestBody" title="请求体" name="requestBody">
					<el-input type="textarea" autosize v-model="data.requestBody" class="code" disabled></el-input>
				</el-collapse-item>
				<el-collapse-item v-if="data.responseData" title="响应体" name="responseData">
					<el-input type="textarea" autosize v-model="data.responseData" class="code" disabled></el-input>
				</el-collapse-item>
				<el-collapse-item v-if="data.errMsg" title="错误信息" name="errMsg">
					<el-input type="textarea" autosize v-model="data.errMsg" class="code" disabled></el-input>
				</el-collapse-item>
			</el-collapse>
		</el-main>
	</el-drawer>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			activeNames: ['requestBody', 'responseData'],
			data: {
				operationType: null,
				operationName: null,
				method: null,
				requestUrl: null,
				requestMethod: null,
				requestIp: null,
				requestLocation: null,
				costTime: null,
				successFlag: null,
				operationUser: null,
				operationTime: null,
				requestParam: null,
				requestBody: null,
				responseData: null,
				errMsg: null,
			}
		}
	},
	methods: {
		setData(data) {
			this.visible = true;
			Object.assign(this.data, data);
		}
	}
}
</script>

<style scoped>
.code {
	font-size: 12px;
	border-radius: 4px;
}
</style>
